<template>
  <van-popup
    :show="visible"
    @close="handleClose"
    custom-style="background: transparent; display: flex; flex-direction: column; justify-content: center; width: 100vw; height: 100vh"
    :overlay="isShowBg"
    v-if="visible"
  >
    <template v-if="show">
      <register @close="animateClose" v-if="step === 0" />
      <enterprise @close="animateClose" v-if="step === 1" />
      <order @close="animateClose" v-if="step === 2" />
    </template>

    <turntable
      :scale="0.85"
      :type="step"
      @show="turntableHandle"
      :style="{ display: !show && isNeedTurntable ? 'block' : 'none' }"
      :hideTurntable.sync="hideTurntable"
      v-if="showTurntable"
    />

    <van-icon name="close" @tap="handleClose" color="#fff" size="32px" style="margin-top: 20rpx" v-if="!show && isNeedTurntable && !hideTurntable" />
  </van-popup>
</template>

<script>
import { mapState } from "vuex";
import register from "./animation/register";
import enterprise from "./animation/enterprise";
import order from "./animation/order";
import turntable from "@/components/turntable/turntable";

export default {
  name: "activity-action",
  props: {
    step: {
      type: Number,
      default: 0
    },
    showTurntable: {
      type: Boolean,
      default: true
    }
  },
  components: {
    register,
    enterprise,
    order,
    turntable
  },
  data() {
    return {
      visible: true,
      show: false,
      hasTurntableCount: undefined,
      hideTurntable: false
    };
  },
  mounted() {
    !this.hasAnimation && this.animateClose();
  },
  methods: {
    animateClose() {
      this.isCloseTurntable && this.handleClose();
      this.show = false;
    },

    turntableHandle(show) {
      this.hasTurntableCount = show;
      !this.show && !this.isNeedTurntable && this.handleClose();
    },

    handleClose() {
      this.visible = false;
      this.$emit("close");
    }
  },
  watch: {
    giftActivitySwitch: {
      handler(giftActivitySwitch) {
        if (giftActivitySwitch.midAutumnGift === undefined) return;
        if (giftActivitySwitch.midAutumnGift) {
          this.show = this.hasAnimation;
          return;
        }

        if (this.isCloseTurntable) this.animateClose();
      },
      immediate: true
    }
  },
  computed: {
    ...mapState(["giftActivitySwitch"]),
    isShowBg() {
      return this.show || this.isNeedTurntable;
    },
    isNeedTurntable() {
      return this.showTurntable && !!this.hasTurntableCount;
    },
    isCloseTurntable() {
      return !this.showTurntable || this.hasTurntableCount === false;
    },
    hasAnimation() {
      return [0, 1, 2].includes(this.step);
    }
  }
};
</script>
